<template>
	<view class="cinema-detail">
		<view class="header">
			<view class="left">
				<view class="name">
					{{cinema.nm}}
				</view>
				<view class="address">
					{{cinema.addr}}
				</view>
			</view>
			<view class="right">
				<uni-icons type="location" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	import {getCinemaDetail} from "@/api/index.js";
	const cinema = ref({});
	const options = ref({});
	const getData = async ()=>{
		let res = await getCinemaDetail(options.value);
		cinema.value = res.data.data;
		console.log(cinema.value);
	}
	onLoad((opt) => {
		options.value = {
			...opt
		}
		getData();
	})
</script>

<style lang="scss">
	.cinema-detail {
		width: 100%;
		.header{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				flex-grow: 1;
				.name{
					font-weight: bold;
					font-size: 40rpx;
					opacity: .9;
				}
				.address{
					font-size: 30rpx;
					color: var(--gray);
				}
			}
			.right{
				width: 200rpx;
				min-width: 200rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>